import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Row, Col, Icon, Menu, Dropdown,Modal,Card,Button,Select,Radio,Tag ,Form,Input,Divider } from 'antd';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import { getTimeDistance } from '@/utils/utils';
import styles from './Analysis.less';
import PageLoading from '@/components/PageLoading';
import SelectPoliceRankTree from '@/components/SelectPoliceRankTree';
import SelectDutyLevelTree from '@/components/SelectDutyLevelTree';
import SelectWorkTree from '@/components/SelectWorkTree';
import SelectChangeTypeTree from '@/components/SelectChangeTypeTree';
const IntroduceRow = React.lazy(() => import('./IntroduceRow'));
const StaffInfoCard = React.lazy(() => import('./StaffInfoCard'));
const TopSearch = React.lazy(() => import('./TopSearch'));
const OfflineData = React.lazy(() => import('./OfflineData'));
const OrganStatistic = React.lazy(() => import('./OrganStatistic'));
const StaffBaseInfoStatistic = React.lazy(() => import('./StaffBaseInfoStatistic'));
const PoliceStatistic = React.lazy(() => import('./PoliceStatistic'));
const FormationStatistic = React.lazy(() => import('./FormationStatistic'));
const PositionStatistic = React.lazy(() => import('./PositionStatistic'));
const PoliceStaticCard = React.lazy(() => import('./PoliceStaticCard'));
const PoliceStaticTrend = React.lazy(() => import('./PoliceStaticTrend'));
const { Option } = Select;
const FormItem = Form.Item;
const { CheckableTag } = Tag;
@connect(({ statisticchart, loading }) => ({
  statisticchart,
  loading: loading.effects['statisticchart/fetch'],
}))
@Form.create()
class Analysis extends Component {
  state = {
    salesType: 'all',
    currentTabKey: '',
    rangePickerValue: getTimeDistance('year'),
    policeNumTime: null,
    isopenPliceNum: false,
    expandForm: false,
    getPoliceRankTreeBySelectTree: "",
    getDutyLevelTreeBySelectTree: "",
    getWorkTreeBySelectTree: "",
    getChangeTypeTreeBySelectTree: "",
    requestModelName:"statisticchart",
    resetFlag: false,
    selectedItems: '警衔统计分析',
    items: ['警衔统计分析', '人员统计分析','机构统计分析','编制统计分析','职数统计分析'],
    modalByModule: false,
    modalByEditModule: false,
    staticPolice: ["拟授警衔","职务级别",'单位','变动类别','人员记录'],
    searchType: 'static_police',
    selectedTags: [],
  };

    handleChange(tag, checked) {
      const { selectedTags } = this.state;
      const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
      console.log('You are interested in: ', nextSelectedTags);
      this.setState({ selectedTags: nextSelectedTags });
    }

  //新增模板弹窗
  handleModalByModule = flag => {
  	this.setState({
  		modalByModule: !!flag,
  	});
  };

  //添加模板
  addItem = () => {
    this.handleModalByModule(true);
  };
  handleModalByModuleAdd = ()=> {
      const { form } = this.props;
      const { items } = this.state;
      form.validateFields((err, fieldsValue) => {
      	if (err) return;
      	form.resetFields();
        this.setState({
          items: [...items, fieldsValue.name],
        });
      });
      this.handleModalByModule(false);
  }

  //修改模板弹窗
  handleModalByEditModule = flag => {
  	this.setState({
  		modalByEditModule: !!flag,
  	});
  };
  //修改模板
  editClick = (e) => {
    e.defaultPrevented;
    this.handleModalByEditModule(true);
  }
  //修改模板弹窗
  handleModalByModuleEdit = flag => {
  	const { form } = this.props;
  	const { items } = this.state;
  	form.validateFields((err, fieldsValue) => {
  		if (err) return;
  		form.resetFields();
      this.state.items.splice(this.state.items.length-1,1);
  	  this.setState({
  	    items: [...items, fieldsValue.name],
  	  });
  	});
  	this.handleModalByEditModule(false);
  };

  //删除模板
  deleteClick = (e) => {
      e.defaultPrevented;
      this.setState({
        items: ['警衔统计分析', '人员统计分析','机构统计分析','编制统计分析','职数统计分析'],
        selectedItems:""
      });
  }

  componentDidMount() {
    const { dispatch } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'statisticchart/fetch',
      });
    });
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.reqRef);
  }

  handleTabChange = key => {
    this.setState({
      currentTabKey: key,
    });
  };

  handleRangePickerChange = rangePickerValue => {
    const { dispatch } = this.props;
    this.setState({
      rangePickerValue,
    });

    dispatch({
      type: 'statisticchart/fetchSalesData',
    });
  };

  handlePanelChangePoliceNum = value => {
    const { dispatch } = this.props;
    this.setState({
      policeNumTime: value,
      isopenPliceNum: false
    });

    dispatch({
      type: 'statisticchart/fetchSalesData',
    });
  };

  handleOpenChangePoliceNum = (status) => {
    if(status){
        this.setState({isopenPliceNum: true})
    } else {
        this.setState({isopenPliceNum: false})
    }
  }

  clearValuePoliceNum = () => {
    this.setState({
        policeNumTime: null
    })
  }

  selectDate = type => {
    const { dispatch } = this.props;
    this.setState({
      rangePickerValue: getTimeDistance(type),
    });

    dispatch({
      type: 'statisticchart/fetchSalesData',
    });
  };

    handleSizeChange = e => {
      this.setState({ size: e.target.value });
    };

  isActive = type => {
    const { rangePickerValue } = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return '';
    }
    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }
    return '';
  };

  //警力统计分析
  handleChangeStaffType = e => {
  	if(e.target.value == "bar") {
  		this.setState({
   			visbleWayByStaff: "pie"
      });
  	}else if(e.target.value == "pie"){
  		this.setState({
        visbleWayByStaff: "bar"
      });
  	}else {
    	this.setState({
        salesType: e.target.value,
      });
  	}
  };

  handleSearch = e => {

  };

  toggleForm = () => {
  	const { expandForm } = this.state;
  	this.setState({
  		expandForm: !expandForm,
  	});
  };


  //拟授警衔
  selectedPoliceRankTreeValue = (deptRecord) => {
  	  this.setState({
  			getPoliceRankTreeBySelectTree: deptRecord,
  		})
  }

  //职务层次
  selectedDutyLevelTreeValue = (deptRecord) => {
  	  this.setState({
  			getDutyLevelTreeBySelectTree: deptRecord,
  		})
  }

  //单位
  selectedWorkTreeValue = (deptRecord) => {
  	  this.setState({
  			getWorkTreeBySelectTree: deptRecord,
  		})
  }

  //变动类型
  selectedChangeTypeTreeValue = (deptRecord) => {
  	  this.setState({
  			getChangeTypeTreeBySelectTree: deptRecord,
  		})
  }

  renderSimpleForm() {
  	const {
  		form: {
  			getFieldDecorator
  		},
  		statisticchart: {
  			selectPoliceRankTree,
        selectDutyLevelTree
  		},
  	} = this.props;
  	const parentPoliceRankTreeMethod = {
  		dispatch: this.props.dispatch,
  		requestModelName: this.state.requestModelName,
  		selectedPoliceRankTreeValue: this.selectedPoliceRankTreeValue,
  		selectPoliceRankTree,
  		resetFlag: this.state.resetFlag
  	}
  	const parentDutyLevelTreeMethod = {
  		dispatch: this.props.dispatch,
  		requestModelName: this.state.requestModelName,
  		selectedDutyLevelTreeValue: this.selectedDutyLevelTreeValue,
  		selectDutyLevelTree,
  		resetFlag: this.state.resetFlag
  	}
  	return(
  	<Form  layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
  	      <Col md={8} sm={24}>
  		        <FormItem label="拟授警衔">
  		        	{getFieldDecorator('police_rank')(<SelectPoliceRankTree  {...parentPoliceRankTreeMethod}/>)}
  						</FormItem>
  	    	</Col>
          <Col md={8} sm={24}>
              <FormItem label="职务层次">
              	{getFieldDecorator('duty_level')(<SelectDutyLevelTree  {...parentDutyLevelTreeMethod}/>)}
          		</FormItem>
          </Col>
  		    <Col md={8} sm={24}>
  		        <span className={styles.submitButtons}>
  		        <Button type="primary" htmlType="submit">
  		        	查询
  		        </Button>
  		        <Button style={{ marginLeft: 8 }}>
  		        	重置
  		        </Button>
  		        <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
  		        	展开 <Icon type="down" />
  		        </a>
  		        </span>
  	        </Col>
          </Row>
    </Form>
  	);
  }

  renderAdvancedForm() {
  	const {
  		form: {
  			getFieldDecorator
  		},
  		statisticchart: {
  			selectPoliceRankTree,
  			selectDutyLevelTree,
  			selectWorkTree,
  			selectChangeTypeTree,
  		},
  	} = this.props;
  	const parentPoliceRankTreeMethod = {
  		dispatch: this.props.dispatch,
  		requestModelName: this.state.requestModelName,
  		selectedPoliceRankTreeValue: this.selectedPoliceRankTreeValue,
  		selectPoliceRankTree,
  		resetFlag: this.state.resetFlag
  	}
  	const parentDutyLevelTreeMethod = {
  		dispatch: this.props.dispatch,
  		requestModelName: this.state.requestModelName,
  		selectedDutyLevelTreeValue: this.selectedDutyLevelTreeValue,
  		selectDutyLevelTree,
  		resetFlag: this.state.resetFlag
  	}
  	const parentWorkTreeMethod = {
  		dispatch: this.props.dispatch,
  		requestModelName: this.state.requestModelName,
  		selectedWorkTreeValue: this.selectedWorkTreeValue,
  		selectWorkTree,
  		resetFlag: this.state.resetFlag
  	}
  	const parentChangeTypeTreeMethod = {
  		dispatch: this.props.dispatch,
  		requestModelName: this.state.requestModelName,
  		selectedChangeTypeTreeValue: this.selectedChangeTypeTreeValue,
  		selectChangeTypeTree,
  		resetFlag: this.state.resetFlag
  	}
  	return(
  		<Form  layout="inline">
  	      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
  				      <Col md={8} sm={24}>
  					        <FormItem label="拟授警衔">
  					        	{getFieldDecorator('police_rank')(<SelectPoliceRankTree  {...parentPoliceRankTreeMethod}/>)}
  									</FormItem>
  				    	</Col>
  				      <Col md={8} sm={24}>
  					        <FormItem label="职务层次">
  					        	{getFieldDecorator('duty_level')(<SelectDutyLevelTree  {...parentDutyLevelTreeMethod}/>)}
  									</FormItem>
  				    	</Col>
                <Col md={8} sm={24}>
                      <FormItem label="单位">
                      	{getFieldDecorator('company')(<SelectWorkTree  {...parentWorkTreeMethod}/>)}
                	</FormItem>
                	</Col>
  	    	</Row>
  	      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

  			      <Col md={8} sm={24}>
  					        <FormItem label="变动类型">
  					        	{getFieldDecorator('change_type')(<SelectChangeTypeTree  {...parentChangeTypeTreeMethod}/>)}
  									</FormItem>
  				    	</Col>
  				    <Col md={8} sm={24}>
  			        <FormItem label="人员记录">
  			            {getFieldDecorator('ryjl')(
  			                <Select placeholder="请选择" style={{ width: '100%' }}>
  			                    <Option value="1">全部</Option>
  			                    <Option value="0">重复</Option>
  			                </Select>
  			            )}
  			        </FormItem>
  		        </Col>
  	    	</Row>
  		    <div style={{ overflow: 'hidden' }}>
  				<div style={{ marginBottom: 24 }}>
  				<Button type="primary" htmlType="submit">
  		        查询
  		        </Button>
  		        <Button style={{ marginLeft: 8 }}>
  		        重置
  		        </Button>
  		        <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
  		        收起 <Icon type="up" />
  		        </a>
  	        	</div>
  	        </div>
        </Form>
  	);
  }

  renderForm() {
  	const {
  		expandForm
  	} = this.state;

  	return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }


  moduleChange = (val) => {
      this.setState({ selectedItems:val });
  }

  //模板类型切换
  handleSearchType = e => {
  	this.setState({
  		searchType: e
  	})
  };


  render() {
    const {
    	rangePickerValue,
    	salesType,
    	currentTabKey,
      policeNumTime,
      isopenPliceNum,
      selectedTags,
      tagsFromServer,
      items,
      modalByModule,
      modalByEditModule,
      selectedItems,
      searchType,
      staticPolice
    } = this.state;

    const { statisticchart, loading } = this.props;
    const {
      visitData,
      visitData2,
      salesData,
      searchData,
      offlineData,
      offlineChartData,
      salesTypeData,
      salesTypeDataOnline,
      salesTypeDataOffline,

      staffInfoDataByArea,
  		staffInfoDataByType,
  		staffInfoDataByPoliticsFace,
  		staffInfoDataByPostType,
  		staffInfoDataByStaffNation,

      organInfoData,
      organInfoDataByType,
  		organInfoDataByLevel,
      policeSpreadData,
      policeDataByPoliceRank,
  		policeDataByDutyLevel,
  	  formationData,
  	  positionData
    } = statisticchart;

    //人员统计信息
    const parentMethodsByStaffBaseInfo = {
      staffInfoDataByArea,
      staffInfoDataByPoliticsFace,
      staffInfoDataByPostType,
      staffInfoDataByStaffNation,
      staffInfoDataByType
    }

    //机构统计信息
    const parentMethodsByOrgan = {
      organInfoData,
      organInfoDataByType,
  		organInfoDataByLevel
    }

    //警力分布信息
    const parentMethodsByPolice = {
      policeSpreadData,
      policeDataByPoliceRank,
  		policeDataByDutyLevel
    }

    //编制统计信息
    const parentMethodsByFormation = {
      formationData
    }

    //职数统计信息
    const parentMethodsByPosimation = {
      positionData
    }

    const menu = (
      <Menu>
        <Menu.Item>操作一</Menu.Item>
        <Menu.Item>操作二</Menu.Item>
      </Menu>
    );

    const dropdownGroup = (
      <span className={styles.iconGroup}>
        <Dropdown overlay={menu} placement="bottomRight">
          <Icon type="ellipsis" />
        </Dropdown>
      </span>
    );

    const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
    const {
    	form: {
    		getFieldDecorator
    	},
    } = this.props;

    let searchTypeData;
    if (searchType === 'static_police') {
      searchTypeData = staticPolice;
    } else if(searchType === "static_person"){
      searchTypeData = staticPolice;
    } else if(searchType === "static_organ"){
      searchTypeData = staticPolice;
    } else if(searchType === "static_formation"){
      searchTypeData = staticPolice;
    } else if(searchType === "static_position"){
      searchTypeData = staticPolice;
    }

    return (
      <GridContent>
      <Modal
      	width={600}
      	centered
      	destroyOnClose
      	title="新增模板"
      	visible={modalByModule}
      	onOk={()=> this.handleModalByModuleAdd()}
      	onCancel={()=> this.handleModalByModuleAdd()}
      	>
        <div className={styles.proUsertableListForm}>

          <Form layout="inline">
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          		      <Col md={24} sm={24}>

          			        <FormItem label="模板名称">
                          {getFieldDecorator('name')(<Input placeholder="请输入" />)}
          							</FormItem>
          		    	</Col>
            	</Row>
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

          	      <Col md={24} sm={24}>
          			        <FormItem label="统计类型">
          			        	<Select
          			        	showSearch
          			        	defaultValue="static_police"
          			        	placeholder="请选择"
          			        	onChange={this.handleSearchType}
          			        	filterOption={(input, option) =>
          			        	  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
          			        	}
          			        	>
          			        	    <Option value="static_police">警衔统计</Option>
          			        	    <Option value="static_person">人员统计</Option>
          			        	    <Option value="static_organ">机构统计</Option>
          			        	    <Option value="static_formation">编制统计</Option>
          			        	    <Option value="static_position">职数统计</Option>
          			        	</Select>

          							</FormItem>
          		    	</Col>
          		    <Col md={24} sm={24}>
                      {/*<FormItem label="查询条件">
          	            <Select
                        showSearch
                        mode="multiple"
                        placeholder="请选择"
                        onChange={this.handleSearchStaff}
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        >
                        {searchTypeData.map((item) => {
                          return <Option value={item}>{item}</Option>
                        })}
                        </Select>
                      </FormItem>*/}
                            <div>
                              <span style={{ marginRight: 8 }}>查询条件:</span>
                              {staticPolice.map(tag => (
                                <CheckableTag
                                  key={tag}
                                  checked={selectedTags.indexOf(tag) > -1}
                                  onChange={checked => this.handleChange(tag, checked)}
                                  className={styles.selectTabStyle}
                                >
                                  {tag}
                                </CheckableTag>
                              ))}
                            </div>
                  </Col>
            	</Row>
            </Form>
        </div>
      </Modal>
      <Modal
      	width={600}
      	centered
      	destroyOnClose
      	title="修改模板"
      	visible={modalByEditModule}
      	onOk={()=> this.handleModalByModuleEdit()}
      	onCancel={()=> this.handleModalByModuleEdit()}
      	>
        <div className={styles.proUsertableListForm}>

          <Form layout="inline">
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          		      <Col md={24} sm={24}>
          			        <FormItem label="模板名称">
                          {getFieldDecorator('name',{
                            initialValue: "警衔统计分析"
                          })(<Input placeholder="请输入" />)}
          							</FormItem>
          		    	</Col>
            	</Row>
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

          	      <Col md={24} sm={24}>
          			        <FormItem label="统计类型">
          			        	<Select
          			        	showSearch
          			        	defaultValue="static_police"
          			        	placeholder="请选择"
          			        	onChange={this.handleSearchType}
          			        	filterOption={(input, option) =>
          			        	  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
          			        	}
          			        	>
          			        	    <Option value="static_police">警衔统计</Option>
          			        	    <Option value="static_person">人员统计</Option>
          			        	    <Option value="static_organ">机构统计</Option>
          			        	    <Option value="static_formation">编制统计</Option>
          			        	    <Option value="static_position">职数统计</Option>
          			        	</Select>

          							</FormItem>
          		    	</Col>
          		    <Col md={24} sm={24}>
          	        {/*<FormItem label="查询条件">
          	            <Select
                        showSearch
                        mode="multiple"
                        placeholder="请选择"
                        onChange={this.handleSearchStaff}
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        >
                        {searchTypeData.map((item) => {
                          return <Option value={item}>{item}</Option>
                        })}
                        </Select>
          	        </FormItem>*/}
                    <div>
                      <span style={{ marginRight: 8 }}>查询条件:</span>
                      {staticPolice.map(tag => (
                        <CheckableTag
                          key={tag}
                          checked={selectedTags.indexOf(tag) > -1}
                          onChange={checked => this.handleChange(tag, checked)}
                          className={styles.selectTabStyle}
                        >
                          {tag}
                        </CheckableTag>
                      ))}
                    </div>
                  </Col>
            	</Row>
            </Form>
        </div>
      </Modal>
        {/*<Suspense fallback={<PageLoading />}>
          <IntroduceRow loading={loading} visitData={visitData} />
        </Suspense>*/}
        <Card
          loading={loading}
          bordered={false}
          title="自定义统计图表"
          style={{marginBottom: "20px"}}
          extra={
            <div className={styles.proDefindModule}>
            <FormItem label="自定义模板">
            	<Select
            	  style={{ width: 240 }}
            	  placeholder="请选择模板"
                value={selectedItems}
                onChange={this.moduleChange}
            	  dropdownRender={menu => (
            	    <div>
            	      {menu}
            	      <Divider style={{ margin: '4px 0' }} />
            	      <div
            	        style={{ padding: '4px 8px', cursor: 'pointer' }}
            	        onMouseDown={e => e.preventDefault()}
            	        onClick={this.addItem}
            	      >
            	        <Icon type="plus" /> 添加模板
            	      </div>
            	    </div>
            	  )}
            	>
            	  {items.map(item => (
            	    <Option value={item}>
                    {item}
                    <Icon className={styles.editIcon} onClick={this.editClick} type="edit" />
                    <Icon className={styles.deleteIcon} onClick={this.deleteClick} type="delete" />
                  </Option>
            	  ))}
            	</Select>
            </FormItem>
            </div>
          }
        >
        <div className={styles.proUsertableListForm}>
            {this.renderForm()}
        </div>
        </Card>
        <Suspense fallback={<PageLoading />}>
          <PoliceStaticCard
            policeNumTime={policeNumTime}
            isopenPliceNum={isopenPliceNum}
            salesData={salesData}
            isActive={this.isActive}
            handleOpenChangePoliceNum={this.handleOpenChangePoliceNum}
            handlePanelChangePoliceNum={this.handlePanelChangePoliceNum}
            clearValuePoliceNum={this.clearValuePoliceNum}
            loading={loading}
            selectDate={this.selectDate}
          />
        </Suspense>
        <Suspense fallback={null}>
          <PoliceStaticTrend
            rangePickerValue={rangePickerValue}
            salesData={salesData}
            isActive={this.isActive}
            handleRangePickerChange={this.handleRangePickerChange}
            loading={loading}
            selectDate={this.selectDate}
          />
        </Suspense>
        <Suspense fallback={null}>
          <StaffInfoCard
            rangePickerValue={rangePickerValue}
            salesData={salesData}
            isActive={this.isActive}
            handleRangePickerChange={this.handleRangePickerChange}
            loading={loading}
            selectDate={this.selectDate}

          />
        </Suspense>
        <div className={styles.twoColLayout}>
          <Row gutter={24} type="flex">
            {/*<Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <TopSearch
                  loading={loading}
                  visitData2={visitData2}
                  selectDate={this.selectDate}
                  searchData={searchData}
                  dropdownGroup={dropdownGroup}
                />
              </Suspense>
           </Col>*/}
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <StaffBaseInfoStatistic
                  dropdownGroup={dropdownGroup}
                  loading={loading}
                  {...parentMethodsByStaffBaseInfo}
                />
              </Suspense>
            </Col>
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <OrganStatistic
                  dropdownGroup={dropdownGroup}
                  loading={loading}
                  {...parentMethodsByOrgan}
                />
              </Suspense>
            </Col>
          </Row>
          <Row gutter={24} type="flex">
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <PoliceStatistic
                  dropdownGroup={dropdownGroup}
                  loading={loading}
                  {...parentMethodsByPolice}
                />
              </Suspense>
            </Col>
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <FormationStatistic
                  dropdownGroup={dropdownGroup}
                  loading={loading}
                  {...parentMethodsByFormation}
                />
              </Suspense>
            </Col>
          </Row>
          <Row gutter={24} type="flex">
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <PositionStatistic
                  dropdownGroup={dropdownGroup}
                  loading={loading}
                  {...parentMethodsByPosimation}
                />
              </Suspense>
            </Col>
          </Row>
        </div>
        {/*<Suspense fallback={null}>
          <OfflineData
            activeKey={activeKey}
            loading={loading}
            offlineData={offlineData}
            offlineChartData={offlineChartData}
            handleTabChange={this.handleTabChange}
          />
        </Suspense>*/}
      </GridContent>
    );
  }
}

export default Analysis;
